<template>
  <view class="index_content">
    <u-swiper :list="swiperList" height="800" @click="previewImg"></u-swiper>
    <view class="form_box">
      <u-form :model="submitData" :error-type="['toast']" ref="uForm" labelWidth="150">
        <u-form-item label="品牌">{{ itemDetail.name }}</u-form-item>
        <u-form-item label="型号">{{ itemDetail.type }}</u-form-item>
        <u-form-item label="尺寸">{{ itemDetail.size }}</u-form-item>
        <u-form-item label="单价">
          <text class="fee">￥{{ itemDetail.price }}</text>
          <text class="unit">/ 天</text>
        </u-form-item>
        <u-form-item label="姓名" prop="realname"><u-input v-model="submitData.realname" placeholder="请输入姓名" /></u-form-item>
        <u-form-item label="住宅地址" prop="address"><u-input type="textarea" v-model="submitData.address" placeholder="请输入住宅地址" /></u-form-item>
        <u-form-item label="手机号" prop="mobile"><u-input v-model="submitData.mobile" placeholder="请输入手机号" maxlength="11" /></u-form-item>
        <u-form-item label="微信号" prop="wechat"><u-input v-model="submitData.wechat" placeholder="请输入微信号" /></u-form-item>
        <u-form-item label="租赁时间" prop="date"><u-input v-model="submitData.date" disabled placeholder="请选择要租赁的时间" @click="showDate = !showDate" /></u-form-item>
        <u-calendar v-model="showDate" mode="range" @change="confirmDate" :min-date="calcMinDate" max-date="2050-01-01"></u-calendar>
      </u-form>
      <view class="concat_service">
        有疑问？
        <button class="btn_text fee" open-type="contact">点我联系</button>
        在线客服
      </view>
    </view>
    <view class="tab_bar">
      <view class="count">
        合计：
        <text class="fee">￥{{ calcMoney }}</text>
      </view>
      <view class="btn_box"><u-button type="error" class="btn" @click="submit">立即预约</u-button></view>
    </view>
  </view>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      swiperList: ['/static/img/index/1.jpg', '/static/img/index/2.jpg', '/static/img/index/3.jpg'],
      itemDetail: {
        name: '波妞',
        type: '升级型',
        size: '50cm * 80cm * 30cm',
        price: '100'
      },
      rules: {
        realname: [
          {
            required: true,
            message: '请输入姓名',
            trigger: 'change, blur'
          }
        ],
        address: [
          {
            required: true,
            message: '请输入住宅地址',
            trigger: 'change, blur'
          }
        ],
        mobile: [
          {
            required: true,
            message: '请输入手机号',
            trigger: 'change, blur'
          },
          this.$validate.isPhone
        ],
        wechat: [
          {
            required: true,
            message: '请输入微信号',
            trigger: 'change, blur'
          }
        ],
        date: [
          {
            required: true,
            message: '请选择',
            trigger: 'change, blur'
          }
        ]
      },
      submitData: {
        realname: '',
        mobile: '',
        wechat: '',
        address: '',
        startDate: '',
        endDate: '',
        date: ''
      },
      showDate: false
    };
  },
  computed: {
    calcMinDate() {
      // 计算可选的最小日期
      let d = new Date();
      return `${d.getFullYear()}-${d.getMonth() + 1}-${d.getDate()}`;
    },
    calcMoney() {
      if (this.submitData.startDate) {
        let sDate1 = Date.parse(this.submitData.startDate);
        let sDate2 = Date.parse(this.submitData.endDate);
        let dateSpan = sDate2 - sDate1;
        dateSpan = Math.abs(dateSpan);
        let iDays = Math.floor(dateSpan / (24 * 3600 * 1000)) + 1;
        return (iDays * this.itemDetail.price).toFixed(2);
      } else {
        return '0.00';
      }
    }
  },
  onShareAppMessage(res) {
    // 小程序分享
    return {
      title: '您的好友呼唤您一起享优惠啦',
      desc: `${this.appNameCNY}是最好的比价平台，一定要感谢你的朋友`,
      path: `/pages/index/index`
    };
  },
  created() {},
  mounted() {
    this.$refs.uForm.setRules(this.rules); // 表单验证规则
  },
  methods: {
    confirmDate(e) {
      this.submitData.startDate = e.startDate;
      this.submitData.endDate = e.endDate;
      this.submitData.date = `${e.startDate} ~ ${e.endDate}`;
    },
    previewImg(index) {
      uni.previewImage({
        urls: this.swiperList,
        current: index,
        indicator: 'default',
        longPressActions: {
          itemList: ['发送给朋友', '保存图片', '收藏'],
          success: function(data) {
            // console.log('选中了第' + (data.tapIndex + 1) + '个按钮,第' + (data.index + 1) + '张图片');
          },
          fail: function(err) {
            // console.log(err.errMsg);
          }
        }
      });
    },
    submit() {
      this.$refs.uForm.validate(valid => {
        if (valid) {
          let text = `${this.appNameCNY}-您有新的预约信息`;
          let desp = `请注意，您有新的预约信息，请及时处理。\n\n用户姓名：${this.submitData.realname}\n\n住宅地址：${this.submitData.address}\n\n手机号：${
            this.submitData.mobile
          }\n\n微信号：${this.submitData.wechat}\n\n租赁时间：${this.submitData.date}`;

          console.log(1, text);
          console.log(2, desp);
          // this.$api.user.sendServerJiang({ text: text, desp: desp });

          uni.showToast({
            title: '恭喜，预约成功',
            icon: 'none'
          });
          this.submitData = {};
        }
      });
    }
  }
};
</script>

<style scoped lang="scss">
.index_content {
  padding-bottom: 180rpx;
  .form_box {
    margin-top: 20rpx;
    padding: 0 30rpx;
    .unit {
      margin-left: 10rpx;
    }
    .concat_service {
      margin-top: 40rpx;
      text-align: right;
      .btn_text {
        background-color: transparent;
        border: none;
        display: inline-block;
        height: 40rpx;
        line-height: 40rpx;
        font-size: 28rpx;
        padding: 0;
        overflow: inherit;
      }
      .btn_text::after {
        content: none;
      }
    }
  }
  .tab_bar {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between;
    height: 100rpx;
    line-height: 100rpx;
    padding: 0 30rpx;
    border-top: 1px solid #e5e5e5;
    background-color: #ffffff;
    z-index: 99;
    .count {
      font-size: 35rpx;
    }
    .btn_box {
      padding-top: 10rpx;
      .btn {
      }
    }
  }
}
</style>
